<template>
  <div class="login">
    <div class="img">
      <!-- <img src="@/assets/image/Logo.png" alt="" /> -->
    </div>
    <div class="from">
      <div class="tab">
        <ul>
          <li>
            <span @click="tabbar(0)" :class="i == 0 ? 'active' : ''"
              >账号登录</span
            >
          </li>
          <li>
            <span @click="tabbar(1)" :class="i == 1 ? 'active' : ''"
              >短信登录</span
            >
          </li>
        </ul>
      </div>
      <div class="account" v-if="tab">
        <form>
          <van-field
            v-model="v1"
            type="tel"
            left-icon="phone-o"
            placeholder="请输入手机账号"
          />
          <van-field
            v-model="v2"
            type="password"
            left-icon="closed-eye"
            placeholder="请输入密码"
          />
          <van-button
            round
            block
            type="info"
            native-type="submit"
            color="#9926f7"
            @click="login"
            >登陆</van-button
          >
        </form>
      </div>
      <div class="message" v-if="!tab">
        <form>
          <van-field
            v-model="v1"
            type="tel"
            left-icon="phone-o"
            placeholder="请输入手机账号"
          />
          <van-field
            v-model="v3"
            center
            clearable
            left-icon="envelop-o"
            placeholder="请输入短信验证码"
          >
            <template #button>
              <van-button size="small" type="primary">发送验证码</van-button>
            </template>
          </van-field>
          <van-button
            round
            block
            type="info"
            native-type="submit"
            color="#9926f7"
            @click="login"
            >登陆</van-button
          >
        </form>
      </div>
      <p>没有账号？<a href="#">立即注册</a></p>
    </div>
    <div class="back" @click="back">
      <van-icon name="arrow-left" color="#fff" />
    </div>
  </div>
</template>
<script>
import { get, post } from "../../utils/util";
import { mapMutations, mapActions } from "vuex";
//vant 提示
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
export default {
  data() {
    return {
      v1: "",
      v2: "",
      v3: "",
      tab: true,
      i: 0,
    };
  },
  created() {
    Toast({
      message: "请先登录",
      icon: "fail",
    });
  },
  methods: {
    ...mapMutations(["saveToken"]),
    ...mapActions(["getuserinfo"]),
    tabbar(i) {
      this.i = i;
      i == 0 ? (this.tab = true) : (this.tab = false);
      //   console.log(i, this.tab);
    },
    back() {
      this.$router.push("/home");
    },
    login() {
      post("/login", { account: this.v1, password: this.v2 }).then((res) => {
        console.log(res);
        if (res.status == 400) {
          Toast.fail(res.msg);
        } else {
          Toast.success(res.msg);
          this.saveToken(res.data.token);
          this.getuserinfo();
          Toast({
            message: "登陆成功",
            icon: "success",
          });
          setTimeout(() => {
            this.$router.push("/");
          }, 1000);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.login {
  margin-bottom: -50px;
  height: 100vh;
  background-image: linear-gradient(180deg, #fff 15%, #9926f7);
  overflow: hidden;
  .img {
    width: 100px;
    height: 100px;
    overflow: hidden;
    background: url("../assets/image/Logo.png") no-repeat;
    background-position: 0 0;
    background-size: 200px;
    margin: 20px auto;
  }
  .from {
    margin: 50px auto;
    width: 320px;
    height: 300px;
    background-color: #fff;
    border-radius: 1em;
    .tab {
      height: 100px;
      line-height: 100px;
      ul {
        display: flex;
        justify-content: space-evenly;
        li {
          font-size: 18px;
          span {
            padding-bottom: 5px;
          }
          .active {
            border-bottom: 3px solid #9926f7;
            color: #9926f7;
          }
        }
      }
    }
    p {
      padding-top: 30px;
      font-size: 14px;
      text-align: center;
      a {
        color: #9926f7;
      }
    }
  }
}
.account,
.message {
  width: 80%;
  margin: 0 auto;
  form {
  }
}
.back {
  text-align: center;
  .van-icon {
    border-radius: 50%;
    background: #000;
    padding: 10px;
    box-sizing: border-box;
  }
}
</style>